<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>艾融网络银行登录界面</title>
    <style>

        body {
            overflow: hidden;
        }

        * {
            margin: 0;
            font-family: "Microsoft Yahei";
            color: #666;
        }

        .open_banner {
            width: 480px;
            height: 640px;
            position: absolute;
            top: 50px;
            right: 200px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 16px;
        }

        /*#open_background{
            width: 800px;
            height: 600px;
        }*/
        #l_content {
            position: relative;
            left: 200px;
            top: 80px;
        }

        #content {
            position: relative;
            right: 45px;
            top: 120px;
        }

        .form {
            position: relative;
            left: 100px;
            top: 20px;
        }

        .form .txt {
            width: 180px;
            height: 20px;

        }


         span {
            position: relative;
            left: 202px;
            color: red;
        }


    </style>
    <script src="../../static/js/jquery-1.11.0.js"></script>
    <script>
        $(function () {
            //拿到当前登录的用户的u_id
            var u_id = $("#userid").text();
            //重新获取焦点后提示语句清空
            $("#c_phone").focus(function (){
                $("#sps3").text("");
            });

            $("#pwd").focus(function (){
                $("#sps4").text("");
            });
             $("#code").focus(function (){
                $("#sps").text("");
            });
            //
            var uid = $("#userid").text();
            //查询当前用户是否绑卡
            //银行卡号输入框失去焦点事件
            $("#c_id").focus(function (){
                $("#sps1").text("");
            });

            $("#c_id").blur(function () {
                var c_id = $("#c_id").val();
                //不可以绑定
                c_id= $.trim(c_id);
                $.ajax({
                    url: "/BindServlet",
                    data: {action: "findBindById", c_id: c_id},
                    type: "post",
                    dataType: "json",
                    success: function (d) {
                        if (d.code!=1){
                            //构建正则表达式
                            var c_idPatt = /^[0-9]{20}$/
                            //3 使用test方法验证
                            if (c_id == null || c_id == "") {
                                $("#sps1").text("银行号不能为空！");
                            } else if (!c_idPatt.test(c_id)) {
                                //4 提示用户结果
                                $("#sps1").text("银行号输入错误！");
                            }else{
                                alert(d.msg);
                            }

                        }else {
                            //可以绑定
                            // $("#idcard").val(d.data.);
                            // $("#i2").val(d.data.u_idcard);
                            $("#c_phone").val(d.data.c_phone);

                        }
                    }

                })
            })

            //手机号格式校验
            $("#c_phone").focusout(function () {
                var u_phone = $("#c_phone").val();
                u_phone = $.trim(u_phone);
                //构建正则表达式
                var u_phonePatt = /^1[3-9][0-9]{9}$/
                //3 使用test方法验证
                if (u_phone == null || u_phone == "") {
                    $("#sps3").text("手机号不能为空！");
                } else if (!u_phonePatt.test(u_phone)) {
                    //4 提示用户结果
                    $("#sps3").text("手机号输入错误！");

                }
            });
            //密码格式校验
            $("#pwd").focusout(function () {
                //验证密码格式是否正确8-16位，由字母,数字和特殊符号至少两种集合组成
                //获取密码框中的密码
                var password = $("#pwd").val();
                password = $.trim(password);
                //构建正则表达式
                var paswordPatt =/^[0-9]{6}$/;
                //3 使用test方法验证
                if (password == null || password == "") {
                    $("#sps4").text("密码不能为空!");
                } else if (!paswordPatt.test(password)) {
                    //4 提示用户结果
                    $("#sps4").text("密码为6-18位数字，字母,符号");
                }

            });
            //验证码点击刷新
            $("#code_img").click(function () {
                this.src = "http://localhost:8080/kaptcha.jpg";
            })

            //验证码不能为空
            $("#code").focusout(function () {
                var code = $("#code").val();
                code = $.trim(code);
                if (code == null || code == "") {
                    $("#sps").text("验证码不能为空!")
                }
            });

            //点击确定时触发（提交数据）
            $("#bind_btn").click(function () {
                var c_phone=$("#c_phone").val();
                var pwd = $("#pwd").val();
                var code = $("#code").val();
                var c_id = $("#c_id").val();
                $.ajax({
                    url: "/BindServlet",
                    data: {
                        action: "updateBind",
                        pwd:pwd,
                        code:code,
                        c_phone:c_phone,
                        c_id:c_id
                    },
                    type: "post",
                    dataType: "json",
                    success: function (d) {
                        if (d.code==1){
                            //绑定成功
                            alert(d.msg)
                        }else {
                            //绑卡失败
                            alert(d.msg)
                        }
                    },
                    error: function () {
                        alert("服务器异常，请稍后重试");
                    }
                })
            })

        })
    </script>


</head>
<body>
<div id="open_background">
    <img class="open_img" alt="" src="../../static/img/login.jpg">
</div>
<div class="open_banner">
    <div id="l_content">
        <h1>绑 卡</h1>
        <!--<span class="login_word">欢迎登录</span>-->
    </div>

    <div id="content">
        <div class="open_form">
            <div class="open_box">
                <!--<div class="msg_cont">
                    <b></b>
                    <span class="errorMsg">
                                &lt;!&ndash;获取回显的错误信息&ndash;&gt;
                                ${empty msg ? "请输入用户名和密码":msg }
                            </span>
                </div>-->
                <div class="form">

                        <input type="hidden" name="action" value="open"/>

                        <!--获取回显的用户名-->

                        <label>请输入银行卡号：</label>
                        <input class="txt" id="c_id" type="text" placeholder="请输入银行卡号"
                               autocomplete="off" tabindex="1" name="c_id" style="position: relative;left: 70px"/>
                        <br>
                        <span id="sps1" ></span>
                        <br>
                        <br>
                        <label>请输入银行卡预存的手机号：</label>
                        <input class="txt" id="c_phone" type="text" placeholder="请输入手机号"
                               autocomplete="off" tabindex="1" name=" c_phone" style="position: relative;right: 10px"/>
                        <br>
                        <span id="sps3" ></span>
                        <br>
                        <br>
                        <label>请输入您的支付密码：</label>
                        <input class="txt" id="pwd" type="password" placeholder="请输入支付密码"
                               autocomplete="off" tabindex="1" name="account" style="position: relative;left: 40px"/>
                        <br>
                        <span id="sps4" ></span>
                        <br>
                        <br>
                        <label>验证码：</label>
                        <input class="txt" id="code" type="text" name="code" style="width: 100px;height: 20px" id="code"
                               placeholder="请输入验证码"/>
                        <img id="code_img" alt="" src="http://localhost:8080/kaptcha.jpg"
                             style="position: relative;left: 3px; top: 10px; width: 90px;height: 40px;">
                        <br>
                        <spen id="sps" style="color:red"></spen>
                        <br>
                        <br>
                        <input type="button" value="绑卡" id="bind_btn"
                               style="width: 200px;height: 40px;position: relative;left: 80px;border-radius: 16px;"/>


                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>